<template>
  <div ref="dom" class="charts chart-pie" style="height:100%"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
// import { on, off } from '@/libs/tools'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartPie',
  props: {
    value: Array,
    text: String,
    subtext: String,
    //是否显示折现指示
    show: {
      type: Boolean,
      default: true
    },
    // 标题颜色
    titleColor: {
      type: String,
      default: '#000'
    },
   // 饼图大小
    radius: {
      type: Array,
      default:()=>['0%', '55%']
    },
    //颜色指标位置
    legendLeft: {
      type: String,
      default:  'right'
    },
    // 标题位置
    titleY: {
      type: String,
      default: 'top'
    },
    //鼠标悬停文字标题
    seriesName: {
      type: String,
      default: '隐患记录'
    },
  },
  data () {
    return {
      dom: null,
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    drawPie()
    {
        this.$nextTick(() => {
        let legend = this.value.map(_ => _.name)
        
        let option = {
          title: {
            text: this.text,
            textStyle:{
              color:this.titleColor,
            },
            subtext: this.subtext,
            x: 'center',
            y: this.titleY,
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}({d}%)'
          },
    
          legend: {
            orient: 'vertical',
            left: this.legendLeft,
            data: legend,
            textStyle:{
              color:this.titleColor,
            }
          },
          series: [
            {
              name: this.seriesName,
              type: 'pie',
              radius: '55%',
              center: ['50%', '50%'],
              data: this.value,
              roseType: 'radius',
              label: {
                normal:{
                  show:true,
                  formatter:'{b}',
                },
              },
               labelLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                smooth: 0.2,
                length: 10,
                length2: 20
            },
            itemStyle: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
           }
          ]
        }
        this.dom = echarts.init(this.$refs.dom, 'tdTheme')
        this.dom.setOption(option)
        // on(window, 'resize', this.resize)
      })
    }
  },
  watch: {
      value: {
        handler(newValue) {
          this.value = newValue;  //把新值赋值给属性
          this.drawPie();  //刷新echarts图表
        },
        deep: true
      }
  },
  mounted () {
    this.drawPie();
  },
  beforeDestroy () {
    // off(window, 'resize', this.resize)
  }
}
</script>
